<template>
	<view class="tags-container">
		<view class="tag">
			<tui-tag type="black" plain v-for="item in data" :key="item._id"
				@click="goDetail(item.name)">{{item.name}}</tui-tag>
		</view>

	</view>
</template>

<script>
	export default {
		name: "MyTags",
		props: {
			data: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goDetail(name) {
				uni.navigateTo({
					url: "/pages/watchMovie/search?name=" + name
				})
			}
		}
	}
</script>

<style lang="scss">
	.tags-container {
		width: 100%;
		margin: 20rpx 0;

		.tag {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx 40rpx;
			// .tui-tag {
			// padding:15rpx 10rpx !important;
			// }
		}
	}
</style>